<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./assets/global.css" />

    <style>
      /* 第一种 */

      .masonry {
        column-count: 4;
        column-gap: 0;
      }

      .item {
        padding: 2px;
        position: relative;
        counter-increment: item-counter;
      }

      .item img {
        display: block;
        width: 100%;
        height: auto;
      }

      .item::after {
        position: absolute;
        display: block;
        top: 2px;
        left: 2px;
        width: 24px;
        height: 24px;
        text-align: center;
        line-height: 24px;
        background-color: #000;
        color: #fff;
        content: counter(item-counter);
      }

      /* 第二种 */
      /* .masonry {
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            height: 1300px;
            width: 100%;
        }

        .item {
            position: relative;
            width: 25%;
            padding: 2px;
            box-sizing: border-box;
            counter-increment: item-counter;

        }

        .item:nth-child(4n+1) {
            order: 1;
        }

        .item:nth-child(4n+2) {
            order: 2;
        }

        .item:nth-child(4n+3) {
            order: 3;
        }

        .item:nth-child(4n) {
            order: 4;
        }

        .item img {
            display: block;
            width: 100%;
            height: auto;
        }

        .item::after {
            position: absolute;
            display: block;
            top: 2px;
            left: 2px;
            width: 24px;
            height: 24px;
            text-align: center;
            line-height: 24px;
            background-color: #000;
            color: #fff;
            content: counter(item-counter);

        } */
    </style>
  </head>

  <body>
    <div class="masonry">
      <div class="item">
        <img src="http://iph.href.lu/360x460" alt="" />
      </div>
      <div class="item">
        <img src="http://iph.href.lu/360x360" alt="" />
      </div>
      <div class="item">
        <img src="http://iph.href.lu/360x260" alt="" />
      </div>
      <div class="item">
        <img src="http://iph.href.lu/360x560" alt="" />
      </div>
      <div class="item">
        <img src="http://iph.href.lu/360x260" alt="" />
      </div>
      <div class="item">
        <img src="http://iph.href.lu/360x320" alt="" />
      </div>
      <div class="item">
        <img src="http://iph.href.lu/360x310" alt="" />
      </div>
      <div class="item">
        <img src="http://iph.href.lu/360x330" alt="" />
      </div>
      <div class="item">
        <img src="http://iph.href.lu/360x310" alt="" />
      </div>
      <div class="item">
        <img src="http://iph.href.lu/360x140" alt="" />
      </div>
      <div class="item">
        <img src="http://iph.href.lu/360x240" alt="" />
      </div>
      <div class="item">
        <img src="http://iph.href.lu/360x640" alt="" />
      </div>
      <div class="item">
        <img src="http://iph.href.lu/360x440" alt="" />
      </div>
      <div class="item">
        <img src="http://iph.href.lu/360x240" alt="" />
      </div>
      <div class="item">
        <img src="http://iph.href.lu/360x130" alt="" />
      </div>
      <div class="item">
        <img src="http://iph.href.lu/360x640" alt="" />
      </div>
    </div>
  </body>
</html>
